<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度地图百度翻译</title>

    <link rel="stylesheet" href="http://cdn.90so.net/layui/2.3.0/css/layui.css">

    <script src="http://cdn.90so.net/layui/2.3.0/layui.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gVako2Nm7CtU0EO7YivNmjpmW6wnSMWX">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    </script>
    <style>
        #container {
            margin-top: 100px;
            height: 500px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div style="width: 1500px; margin: 0 auto;">
        <div style="width: 880px;float: left;">
            <div id="container" style="border:solid  darkseagreen"></div>
        </div>

        <div style="width: 590px;float:right;margin-top: 100px;margin-left: 20px;">
            <div>
                <h2> 最后的结果:</h2>
                <br />
                <span>要翻译的内容:</span>
                <span id="ystr">请选择地址</span>
                <br>
            </div>
            <br>
            <button class="layui-btn" onclick="fanyi('zh')">中文</button>
            <button class="layui-btn" onclick="fanyi('en')">英文</button>
            <button class="layui-btn" onclick="fanyi('jp')">日语</button>
            <button class="layui-btn" onclick="fanyi('kor')">韩语</button>
            <button class="layui-btn" onclick="fanyi('cht')">繁体</button>
            <input type="hidden" id="hidcont" value="">
            <div>
                <br>
                <span>翻译后的内容:</span>
                <span id="xstr" style="font-size: 18px;"></span>
            </div>

        </div>


    </div>


    <script type="text/javascript">
        var map = new BMap.Map("container");
        // 创建地图实例  
        var point = new BMap.Point(116.404, 39.915);
        // 创建点坐标  
        map.centerAndZoom(point, 5);
        map.enableScrollWheelZoom(true);
        var marker = new BMap.Marker(point); // 创建标注    
        map.addOverlay(marker);
        marker.enableDragging();
        marker.addEventListener("dragend", function (e) {
            var myGeo = new BMap.Geocoder();
            $.ajax({
                type: "get",
                dataType: 'jsonp',
                url: "http://api.map.baidu.com/geocoder/v2/?location=" + e.point.lat + "," + e.point.lng +
                    "&output=json&pois=1&ak=gVako2Nm7CtU0EO7YivNmjpmW6wnSMWX",
                success: function (res) {
                    console.log(res);
                    console.log(res.status);
                    console.log(res.result);
                    //res.result.addressComponent.country 国家
                    //res.result.addressComponent.province 省或地区
                    //res.result.addressComponent.city 城市
                    $("#content").html(res.result.formatted_address)
                    $("#hidcont").val(res.result.addressComponent.country + "\n" + res.result.addressComponent
                        .province + "\n" + res.result.addressComponent.city + "\n")
                    $("#ystr").text(res.result.addressComponent.country + res.result.addressComponent
                        .province + res.result.addressComponent.city)
                    //alert(res.result.formatted_address);
                }
            });

        })
    </script>

    <script type="text/javascript">
        function fanyi(yuyan) {
            if ($("#hidcont").val() == "") {

                layui.use('layer', function () {
                    var layer = layui.layer;

                    layer.msg('请先选择地址');
                });
                return false;
            }
            var appid = '20180725000188784';
            var key = 'pBEIB5oxfDcsOF4j80WZ';
            var salt = (new Date).getTime();
            var query = $("#hidcont").val(); //'apple\norange\nbanana\npear';
            // 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
            var from = 'auto';
            var to = yuyan;
            //中文zh 英语en 日语jp 韩语kor 繁体中文cht
            var str1 = appid + query + salt + key;
            var sign = md5(str1);
            $.ajax({
                url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
                type: 'get',
                dataType: 'jsonp',
                data: {
                    q: query,
                    appid: appid,
                    salt: salt,
                    from: from,
                    to: to,
                    sign: sign
                },
                success: function (data) {
                    console.log(data)
                    if (data.trans_result.length > 2) {
                        $("#xstr").text(data.trans_result[0].dst + data.trans_result[1].dst + data.trans_result[
                            2].dst)
                    } else {
                        $("#xstr").text("请选择其他语言进行翻译")
                    }
                }
            });
        }
    </script>
</body>

</html>